<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>新闻列表</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
	<div class="container" id="app">
		<div class="row">
			<div class="col-md-12">
				<div class="page-header">
					TODOLIST
				</div>
			</div>
		
			<div class="col-md-4">
				<form class="form form-inline">
					<div class="form-group form-group-sm">
						<input type="text" class="form-control" v-model="todoclassname" placeholder="请输入分类名称">
						<button type="button" class="btn btn-primary" v-on:click="addtodoclass('0')">添加同级</button>
						<button type="button" class="btn btn-info" v-on:click="addtodoclass('1')">添加下级</button>
					</div>
				</form>
				<ul class="nav nav-pills nav-stacked">
					<li v-for="(item,index) in todoclasses" @click="changetodoclass(item,index)">
						<a href="#">{{item.todoclass.name}}</a>
					</li>
				</ul>
			</div>
			<div class="col-md-8">
				<form class="form form-inline">
					<div class="form-group">
						<input type="text" class="form-control" v-model="todotitle" placeholder="请输入待办事项名称">
						<button type="button" class="btn btn-primary" @click="addtodo()" >添加</button>
					</div>
				</form>
				<div class="list-group">
					<a href="#" class="list-group-item" v-for="(item,index) in currenttodoclass.todos">
						<span class="badge label-success" @click="removetodo(item,index)">删除</span>
						<span class="badge label-success" v-if="item.state==1">已完成</span>
						<span class="badge label-success" v-if="item.state==0" @click="updatetodostate(item)">未完成</span>
						{{index+1}},{{item.title}},【{{item.create_dt}}】
					</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
    var vue=new Vue({
        el:"#app",
        data:{
        	currenttodoclass:{},
			todoclassname:'',
			todotitle:'',
			todoclasses:[],
			currenttodoclassindex:0
           
        },
        methods:{
            changetodoclass:function(item){
                this.currenttodoclass=item;
               // this.currenttodoclassindex=index;
            },
            init:function(){
				axios.get('/20180509Todo/todo/listtodoclasses.wst').then(function(result){
					while(vue.todoclasses.length>0){
						vue.todoclasses.pop();
					}
					for(var i=0;i<result.data.todoclasses.length;i++){
						vue.todoclasses.push(result.data.todoclasses[i]);
					}
					vue.currenttodoclass=vue.todoclasses[vue.currenttodoclassindex];

				}).catch(function(err){
					console.error(err);
					alert('网络异常');
				})
			},
            addtodoclass:function(level){
            	var param='',
            	param='todoClassName='+this.todoclassname;
            	axios.post('20180509Todo/todo/savetodoclass.wst',param).then(function(result){
            		if(result.status==200){
            			console.log(result);
            			alert('保存成功');
            			vue.init();
            			vue.todoclassname='';	
            		}
            	}).catch(function(err){
            		console.error(err);
            		alert('服务器异常');
            	})	
            },
            addtodo:function(){
				var param='';
				param='todoclassid='+this.currenttodoclass.todoclass.id+'&title='+this.todotitle;
				axios.post('/20180509Todo/todo/savetodo.wst',param).then(function(result){
					if(result.status==200){
						alert('保存成功');
						vue.init();
						vue.todotitle='';
					}
				}).catch(function(err){
					console.error(err);
					alert('服务器异常');
				})
            },
           
            updatetodostate:function(item,index){
				if(confirm('该事件已完成了吗？')){
					var param='';
					param="id="+item.id;
					axios.post('/20180509Todo/todo/updatetodostate.wst',param).then(function(result){
						if(result.status==200){
							alert('改变状态成功');
							item.state=1;
						}
					}).catch(function(err){
						console.error(err);
						alert('服务器错误');
					})
				}
			},
			removetodo:function(item){	
				if(confirm('确定删除吗？')){
					var param='';
					param='id='+item.id;
					axios.post('/20180509Todo/todo/removetodo.wst',param).then(function(result){
						if(result.status==200){
							alert('删除成功');
							vue.init();
						}
					}).catch(function(result){
						console.error(err);
						alert('服务器错误');
					})
				}
				
			}
			
        },
        mounted:function(){
            console.log('inited');
            this.init();

        }
    });
</script>